<template>
	<view class="login-container">
		<view class="login-header">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="app-name">电影世界</text>
		</view>

		<view class="login-form">
			<view class="form-item">
				<uni-easyinput
					v-model="loginForm.username"
					placeholder="请输入用户名/手机号"
					:styles="inputStyles"
					prefixIcon="person"
				></uni-easyinput>
			</view>

			<view class="form-item">
				<uni-easyinput
					v-model="loginForm.password"
					type="password"
					placeholder="请输入密码"
					:styles="inputStyles"
					prefixIcon="locked"
				></uni-easyinput>
			</view>

			<button class="login-btn" @click="handleLogin" :disabled="!canLogin">
				{{ isLoading ? '登录中...' : '登录' }}
			</button>

			<view class="login-options">
				<text class="register-link" @click="goToRegister">还没有账号？立即注册</text>
				<text class="forgot-link" @click="forgotPassword">忘记密码？</text>
			</view>
		</view>

		<view class="quick-login">
			<text class="quick-title">快速登录</text>
			<view class="quick-buttons">
				<button class="quick-btn wechat" @click="wechatLogin">微信登录</button>
				<button class="quick-btn guest" @click="guestLogin">游客模式</button>
			</view>
		</view>
	</view>
</template>

<script>
import { useUserStore } from '@/stores/user.js'

export default {
	data() {
		return {
			loginForm: {
				username: '',
				password: ''
			},
			isLoading: false,
			inputStyles: {
				color: '#333333',
				backgroundColor: '#f8f8f8',
				borderColor: '#e0e0e0'
			}
		}
	},
	setup() {
		const userStore = useUserStore()
		return {
			userStore
		}
	},
	onLoad() {
		// 初始化用户数据
		this.userStore.initUserData()
	},
	computed: {
		canLogin() {
			return this.loginForm.username.trim() && this.loginForm.password.trim() && !this.isLoading
		}
	},
	methods: {
		async handleLogin() {
			if (!this.canLogin) return

			this.isLoading = true

			try {
				const result = this.userStore.login(this.loginForm.username, this.loginForm.password)

				if (result.success) {
					uni.showToast({
						title: result.message,
						icon: 'success'
					})

					// 跳转到首页
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: result.message,
						icon: 'none'
					})
				}

			} catch (error) {
				uni.showToast({
					title: '登录失败',
					icon: 'none'
				})
			} finally {
				this.isLoading = false
			}
		},

		goToRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			})
		},

		forgotPassword() {
			uni.showToast({
				title: '找回密码功能开发中',
				icon: 'none'
			})
		},

		wechatLogin() {
			uni.showToast({
				title: '微信登录功能开发中',
				icon: 'none'
			})
		},

		guestLogin() {
			this.userStore.guestLogin()

			uni.showToast({
				title: '进入游客模式',
				icon: 'success'
			})

			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}, 1500)
		}
	}
}
</script>

<style scoped>
.login-container {
	min-height: 100vh;
	background: #ffffff;
	padding: 80rpx 40rpx 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.login-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-bottom: 100rpx;
}

.logo {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 30rpx;
	display: block;
}

.app-name {
	font-size: 48rpx;
	font-weight: bold;
	color: #ff6b35;
	text-align: center;
}

.login-form {
	margin-bottom: 60rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.login-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(45deg, #ff6b35, #ff8c42);
	color: white;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 40rpx;
}

.login-btn:disabled {
	background: #cccccc;
	color: #999999;
}

.login-options {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}

.register-link, .forgot-link {
	color: #ff6b35;
	font-size: 28rpx;
}

.quick-login {
	margin-top: auto;
	padding-bottom: 40rpx;
}

.quick-title {
	color: #666666;
	font-size: 28rpx;
	text-align: center;
	margin-bottom: 30rpx;
}

.quick-buttons {
	display: flex;
	gap: 20rpx;
}

.quick-btn {
	flex: 1;
	height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	border: none;
}

.wechat {
	background: #07c160;
	color: white;
}

.guest {
	background: #f5f5f5;
	color: #333333;
	border: 2rpx solid #e0e0e0;
}
</style>